<script setup lang="ts">
import { watch, ref, onBeforeUnmount, nextTick, inject } from "vue";
import { DArrowLeft, ArrowLeft } from "@px-ui/icons-vue";
import useDrag from "../hooks/useDrag";
import ComponentWrapper from "../component/ComponentWrapper.vue";
defineOptions({
  name: "FloorTemplate"
});
const emits = defineEmits(["changeCompPicScale"]);
const done = defineModel("done");
const pageType = inject("pageType", ref(""));
const props = defineProps({
  middleComp: {
    type: Array,
    required: true,
    default: () => []
  },
  rightComp: {
    type: Array,
    required: true,
    default: () => []
  },
  leftComp: {
    type: Array,
    required: false,
    default: () => []
  },
  widgetVerticalComp: {
    type: Array,
    required: false,
    default: () => []
  },
  widgetVerticalCompLeft: {
    type: Array,
    required: false,
    default: () => []
  },
  widgetHorizontalComp: {
    type: Array,
    required: false,
    default: () => []
  }
});
const { dragInit } = useDrag();
let offEvents = null;
const toggleRgiht = ref(true);

watch(
  () => props.middleComp,
  (cur, pre) => {
    if (cur.length > 0) {
      nextTick(async () => {
        // if (pageType.value === "EQP") done.value = true;
        done.value = true;
        offEvents = await dragInit(cur);
        if (props.rightComp.length === 0) {
          toggleRgiht.value = false;
        }
      });
    }
  }
);
onBeforeUnmount(() => {
  if (offEvents) {
    offEvents();
    offEvents = null;
  }
});
const toggleDropdown = () => {
  toggleRgiht.value = !toggleRgiht.value;
};
</script>

<template>
  <div class="floor-tmpl common-tmpl">
    <div class="floor-tmpl-middle">
      <div class="middle-content">
        <ComponentWrapper v-for="(item, index) in props.middleComp" :key="index" :config="item['item']" :remote-data="item['rawData']" />
      </div>
      <div v-if="props.leftComp.length > 0" class="floor-tmpl-left">
        <ComponentWrapper v-for="(item, index) in props.leftComp" :key="index" :config="item['item']" :remote-data="item['rawData']" />
      </div>
      <div class="floor-tmpl-widget-horizontal">
        <ComponentWrapper v-for="(item, index) in props.widgetHorizontalComp" :key="index" :config="item['item']" :remote-data="item['rawData']" />
      </div>

      <div class="floor-tmpl-right" :class="{ 'select-open': toggleRgiht, 'select-close': !toggleRgiht }">
        <div v-if="props.widgetVerticalCompLeft.length > 0" class="floor-tmpl-widget-vertical-left">
          <ComponentWrapper
            v-for="(item, index) in props.widgetVerticalCompLeft"
            :key="index"
            :config="item['item']"
            :remote-data="item['rawData']"
          />
        </div>
        <div v-if="props.widgetVerticalComp.length > 0" class="floor-tmpl-widget-vertical">
          <div class="widget-vertical-content">
            <ComponentWrapper v-for="(item, index) in props.widgetVerticalComp" :key="index" :config="item['item']" :remote-data="item['rawData']" />
          </div>
        </div>

        <px-scrollbar class="right-content">
          <ComponentWrapper v-for="(item, index) in props.rightComp" :key="index" :config="item['item']" :remote-data="item['rawData']" />
        </px-scrollbar>
        <!-- <px-button
          v-if="props.widgetVerticalComp.length > 0"
          class="toggle-btn action"
          :class="{ active: toggleRgiht, 'no-active': !toggleRgiht }"
          :icon="DArrowLeft"
          link
          @click.stop="toggleDropdown()"
        /> -->
        <px-button
          class="toggle-btn2 action"
          :class="{ active: toggleRgiht, 'no-active': !toggleRgiht, 'toggle-btn-more': props.widgetVerticalComp.length > 0 }"
          :icon="ArrowLeft"
          circle
          @click.stop="toggleDropdown()"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
/* 逐渐从右侧展开的动画 */
@keyframes slide-right {
  0% {
    width: 16px;
  } /* 从 0.1 开始，因为收起后保留 20px */
  100% {
    width: 420px;
  }
}

/* 逐渐从右侧收起的动画 */
@keyframes slide-left {
  0% {
    width: 420px;
  }

  100% {
    width: 16px;
  } /* 收起到 0.1，保留 20px */
}

.floor-tmpl {
  display: flex;
  flex-grow: 1;
  width: 100%;
  height: 100%;
  background: #f0f2f5;
  background-image: radial-gradient(rgb(0 0 0 / 10%) 5%, transparent 0);
  background-size: 30px 30px;
  border-radius: 8px;

  .floor-tmpl-middle {
    // display: flex;
    // flex-direction: column;
    // flex-grow: 1;
    // flex-shrink: 1;
    // align-items: center;
    // justify-content: center;
    // min-width: 800px;
    // height: 800px;
    // margin-left: 16px;
    // background-color: red;
    position: relative;
    flex-grow: 1;
    width: 100%;
    height: 100%;

    .middle-content {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }

  .floor-tmpl-left {
    position: absolute;
    bottom: 16px;
    left: 16px;
    width: 300px;
    height: auto;
  }

  .floor-tmpl-widget-horizontal {
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;

    div:first-child {
      margin-right: 150px;
    }
  }

  .floor-tmpl-widget-vertical-left {
    position: absolute;
    top: 0;
    left: -120px;
    width: 50px;
    height: 100%;
  }

  .floor-tmpl-widget-vertical {
    position: absolute;
    top: 0;
    left: -64px;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    align-items: flex-end;
    justify-content: space-between;
    width: 64px;
    height: 100%;
    background: rgb(0 0 0 / 4%);

    .widget-vertical-content {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      align-items: flex-end;
      justify-content: space-between;
      width: 100%;

      div:last-child {
        // align-self: flex-end;
        margin-bottom: 8px;
      }
    }
  }

  .floor-tmpl-right {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 420px;
    height: 100%;
    background: #fff;
    backdrop-filter: blur(10px);
    border-radius: 8px;
    opacity: 0.75;

    .right-content {
      position: relative;
      width: 415px;
      height: 100%;
    }

    .toggle-btn {
      position: absolute;
      bottom: 10px;
      left: -40px;
      z-index: 99;

      :deep(.px-button) {
        outline: none;
      }
    }

    .toggle-btn2 {
      position: absolute;
      top: 5px;
      left: -30px;
      z-index: 99;
    }

    .toggle-btn-more {
      left: -90px;
    }

    .active {
      transform: rotate(180deg);
    }

    .action {
      transition: transform 0.3s ease;
    }
  }

  /* 右侧展开时使用的动画 */
  .select-open {
    transform-origin: right center;
    animation: slide-right 0.6s ease-out forwards;
  }

  /* 右侧收起时使用的动画 */
  .select-close {
    transform-origin: right center;
    animation: slide-left 0.6s ease-in forwards;
  }
} // @import url(../common/base.scss);
</style>
